<template>
	<view>
		<!-- #ifndef APP-PLUS -->
		<view class="wrap">
			<view class="u-tips-color">
				{{$t('inspection.message.openApp')}}
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import { notice } from '@/utils/common.js'
	import { inspect as util } from '@/utils/business/common.js'
	
	export default {
		data() {
			return {
				barcode: null,
				flash: false,
				taskId: '',
				lineId: '',
				isAreaLocation: 1
			}
		},
		onShow() {
			// 页面展示时，重新启动扫描检测
			if (this.barcode) {
				this.barcode.start()
			}
		},
		onLoad(params) {
			this.taskId = params.taskId
			this.lineId = params.lineId
			this.isAreaLocation = params.isAreaLocation

			// #ifdef APP-PLUS
			// plus.navigator.setFullscreen(true); //全屏
			let currentWebview = this.$scope.$getAppWebview() //this.$mp.page.$getAppWebview();
			this.createBarcode(currentWebview)
			this.createTipInfoView(currentWebview)
			this.createFlashBarView(currentWebview)
			// #endif
		},
		methods: {
			/**
			 * 创建二维码
			 * @param {Object} currentWebview
			 */
			createBarcode(currentWebview) {
				if (!this.barcode) {
					this.barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
						top: `0`,
						left: '0px',
						bottom: '0px',
						width: '100%',
						position: 'absolute',
						// background: '#1e90e6',
						frameColor: '#1e90e6',
						scanbarColor: '#1e90e6',
					});
					this.barcode.onmarked = this.onmarked;
					this.barcode.setFlash(this.flash);
					//此处未演示扫码成功回调的地址设置，实际请参考HTML5Plus API自行处理  
					//注意扫码区域需为正方形，否则影响扫码识别率 
					currentWebview.append(this.barcode);
				}
				this.barcode.start()
			},

			/**
			 * 创建提示信息
			 * @param {Object} currentWebview
			 */
			createTipInfoView(currentWebview) {
				const txtCont = new plus.nativeObj.View('content', {
						top: '57%',
						left: '0px',
						height: '100%',
						width: '100%'
					},
					[{
						tag: 'font',
						id: 'scanTips',
						text: this.$t('inspection.message.automaticallyScan'),
						textStyles: {
							size: '14px',
							color: '#ffffff',
							whiteSpace: 'normal'
						},
						position: {
							top: '90px',
							left: '10%',
							width: '80%',
							height: 'wrap_content'
						}
					}]);
				const noCodeTxt = new plus.nativeObj.View('noCodeTxt', {
						top: '63%',
						left: '0px',
						height: '100%',
						width: '100%'
					},
					[{
						tag: 'font',
						id: 'scanTips',
						text: this.$t('inspection.message.noQRCode'),
						textStyles: {
							size: '14px',
							color: '#1e90e6',
							whiteSpace: 'normal'
						},
						position: {
							top: '90px',
							left: '10%',
							width: '80%',
							height: 'wrap_content'
						}
					}]);

				noCodeTxt.interceptTouchEvent(true);

				// 顶部返回按钮
				// const backVew = new plus.nativeObj.View(
				// 	'backVew', {
				// 		top: '20px',
				// 		left: '20px',
				// 		height: '40px',
				// 		width: '100%',
				// 		zIndex: '9999'
				// 	},
				// 	[{
				// 		tag: 'img',
				// 		id: 'backBar',
				// 		src: '/static/images/icon/12.png',
				// 		position: {
				// 			height: '24px',
				// 			width: '24px'
				// 		}
				// 	}]
				// );
				// 顶部返回区域文字
				// const backAreaTxt = new plus.nativeObj.View('backAreaTxt', {
				// 		top: '22px',
				// 		left: '20px',
				// 		height: '40px',
				// 		width: '30%',

				// 	},
				// 	[{
				// 		tag: 'font',
				// 		id: 'backArea',
				// 		text: '返回',
				// 		textStyles: {
				// 			size: '16px',
				// 			color: '#ffffff',
				// 			whiteSpace: 'normal',
				// 			textAlign: 'left',
				// 		},
				// 		position: {
				// 			// width: '100%',
				// 			height: 'wrap_content'
				// 		}
				// 	}]);

				// backVew.interceptTouchEvent(true);
				noCodeTxt.interceptTouchEvent(true);
				// backAreaTxt.interceptTouchEvent(true);
				currentWebview.append(txtCont);
				currentWebview.append(noCodeTxt);
				// currentWebview.append(backVew);
				// currentWebview.append(backAreaTxt);
				// 点返回
				// backVew.addEventListener('click', function(e) {
				// 	uni.navigateBack({
				// 		delta: 1
				// 	});
				// 	barcode.close();
				// 	plus.navigator.setFullscreen(false);
				// }, false);
				// backAreaTxt.addEventListener('click', function(e) {
				// 	uni.navigateBack({
				// 		delta: 1
				// 	});
				// 	barcode.close();
				// 	plus.navigator.setFullscreen(false);
				// }, false);
				
				// 点没有二维码？
				noCodeTxt.addEventListener('click', (e) => {
					// 跳到区域确认页面
					uni.redirectTo({
						url: "/pages/business/inspect/sureCode?taskId=" + this.taskId + "&lineId=" + this.lineId + "&isAreaLocation=" + this.isAreaLocation
					})
				}, false)
			},

			// 创建开关灯按钮
			createFlashBarView(currentWebview) {
				const openImg = this.crtFlashImg('../../static/images/icon/warn-icon.png')
				const closeImg = this.crtFlashImg('../../static/images/icon/video-icon.png')
				const scanBarVew = new plus.nativeObj.View('scanBarVew', {
					bottom: '5%',
					left: '38%',
					height: '10%',
					width: '24%',
				}, closeImg);
				scanBarVew.interceptTouchEvent(true);

				currentWebview.append(scanBarVew);

				scanBarVew.addEventListener("click", (e) => { //点亮手电筒
					this.flash = !this.flash;
					if (this.flash) {
						scanBarVew.draw(openImg);
					} else {
						scanBarVew.draw(closeImg)
					}
					if (this.barcode) {
						this.barcode.setFlash(this.flash);
					}
				}, false)
			},

			crtFlashImg(imgsrc) {
				return [{
					tag: 'font',
					id: 'font',
					text: this.$t('inspection.message.lightTouch'),
					textStyles: {
						size: '16px',
						color: '#1e90e6'
					},
					position: {
						width: '100%',
						left: '0'
					}
				}]
			},
			
			// 扫码成功回调
			async onmarked(type, res) {
				console.log('条码内容：' + res);
				
				let result = await util.verifyControlMode(this.taskId, res, 'scan', 'online')
				if(result.isPass) {
					uni.redirectTo({
						url: '/pages/business/inspect/inspectItem?taskId=' + this.taskId + '&lineId=' + this.lineId + 
							'&areaId=' + result.areaId + '&locaId=' + result.locaId + '&isAreaLocation=' + this.isAreaLocation
					});
					barcode.close();
				} else {
					notice.toast(result.msg)
					setTimeout(()=>{
						if (this.barcode) {
							this.barcode.start()
						}
					}, 1000)
				}
			}
		}
	}
</script>

<style>
</style>
